<template>
	<!-- <view class="uni-container" :style="{'background-image': 'url('+imageURL+')', 'background-repeat': 'no-repeat', 'background-size': '100%'}"> -->
	<view class="uni-container" :style="{'background-color': '#CCCCFF', 'background-repeat': 'no-repeat', 'background-size': '100% 30%'}">

		<view class="deduction">
			<view class="deductionitem">
				<view class="title">赡养老人</view>
				<view class="desc">
					<text>如果纳税人非独生子女，由多个子女分摊每月2000元的扣除额度，最高不超过每月1000元</text>
				</view>
				<view class="subtitle"></view>
				<checkbox-group>
					<label @click="handleCheckboxNumber($event, 1)" style="margin: 10px 0; padding: 10px 0; display: block; border-bottom: .026667rem solid #e7ecea;">
						<checkbox value="1" :checked="od===1" color="#FFCC33" style="transform:scale(0.7);" />
						独生子女
						<text style="float: right;color: #3b7de0;font-size: .8943333rem;font-weight: 700;">￥2000/月</text>
					</label>
					<label @click="handleCheckboxNumber($event, 2)" style=" padding: 10px 0; display: block; border-bottom: .026667rem solid #e7ecea;">
						<checkbox value="2" :checked="od===2" color="#FFCC33" style="transform:scale(0.7)"/>
						<text style="display: inline-block;">2个兄弟姐妹</text>
						<text style="float: right;color: #3b7de0;font-size: .8943333rem;font-weight: 700;">￥1000/月</text>
					</label>
					<label @click="handleCheckboxNumber($event, 3)" class="check_input" style="padding: 10px 0; display: block;">
						<checkbox value="3" :checked="od===3" color="#FFCC33" style="transform:scale(0.7)"/>
						3个及以上
						<view class="threeandabove display_flex">
							<text class="display_flex">
								<text class="span">￥</text>
								<input @input="handleNumInput" type="number" v-model="num"  style="padding: 0 10px; display: inline-block;"/>
							</text>
							<text class="display_flex_span">/月</text>
						</view>
						
					</label>
				</checkbox-group>
				
			</view>
			<view class="submit">
				<view class="submitbtn" @click="handleSumbit">
					确定
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				od: 0,
				num: '',
				moy: 0
			}
		},
		computed: {
			...mapState(['wages'])
		},
		onLoad(e) {
			if(this.wages.oldAll) {
				this.od = this.wages.oldAll.od
				this.num = this.wages.oldAll.num
			}
		},
		methods: {
			...mapMutations(['setOld']),
			handleCheckboxNumber(e, i) {
				if(this.od === i) {
					this.od = 0
				}else {
					this.od = i
				}
				this.calculateTotal()
			},
			handleNumInput() {
				this.calculateTotal()
			},
			calculateTotal() {
				if(!this.od) {
					this.moy = 0
					return
				}
				if(this.od === 1) {
					this.moy = 2000
				}
				if(this.od === 2) {
					this.moy = 1000
				}
				if(this.od === 3) {
					this.moy = this.num
				}
				
			},
			handleSumbit() {
				if(this.od === 3 && !this.num) {
					uni.showToast({
					    title: '请填写分摊扣款额度',
						icon: 'none',
					    duration: 1000
					});
					return
				}
				this.setOld({moy: this.moy, od: this.od, num: this.num})
				uni.navigateTo({
					url: '/pages/wages/index'
				});
			}
			
		}
	}
</script>

<style>
	.deduction {
	    overflow: hidden;
	    position: relative;
	    min-height: 100vh;
	    background-image: linear-gradient(#ccccff,#3b7de0)
	}
	
	.deduction .deductionitem {
	    margin: 6.366667rem 1.5rem 2.646667rem;
	    background-color: #fff;
	    padding: 1.266667rem;
	    border-radius: .313333rem;
	    color: #000;
	    font-size: .673333rem
	}
	
	.deduction .deductionitem .title {
	    font-size: .926667rem;
	    text-align: center;
	    margin-bottom: .726667rem
	}
	
	.deduction .deductionitem .desc {
	    color: #666;
	    font-size: .62rem;
	}
	
	.deduction .deductionitem .desc uni-text{
	    display: block;
	}
	
	.deduction .deductionitem .desc p {
	    line-height: .426667rem
	}
	
	.deduction .deductionitem .subtitle {
	    padding: .533333rem 0 .213333rem 0;
	    color: #010101;
	    align-items: baseline
	}
	
	.deduction .deductionitem .subtitle span {
	    color: #3b7de0
	}
	
	.deduction .deductionitem .inputgroup {
	    padding: .333333rem .7rem;
	    background-color: #f1f4f2;
	    border-radius: .406667rem;
	    color: rgba(0,0,0,.5)
	}
	.deduction .deductionitem .inputgroup .check_input input {
		background-color: #ffffff;
		display: inline-block;
		height: 1.56rem;
		line-height: 1.56rem;
		border: .026667rem solid #e7ecea;
		border-radius: .406667rem;
	}
	
	.deduction .deductionitem .inputgroup .other {
	    height: .96rem;
	    width: 5.6rem;
	    border: .026667rem solid #e7ecea;
	    background-color: #fff;
	    border-radius: .106667rem;
	    text-indent: .266667rem;
	    margin-left: .133333rem
	}
	
	.deduction .deductionitem .radiogroup {
	    justify-content: space-between;
	    padding: .4rem 0;
	    border-bottom: .026667rem solid #e7ecea;
	    font-size: .373333rem;
	    align-items: center
	}
	
	.deduction .deductionitem .radiogroup .van-radio__label {
	    width: 20%
	}
	
	.deduction .deductionitem .radiogroup span {
	    color: #3b7de0
	}
	
	.deduction .deductionitem .radiogroup p {
	    height: .426667rem;
	    line-height: .426667rem
	}
	
	.deduction .deductionitem .display_flex {
	    align-items: baseline
	}
	
	.deduction .deductionitem .threeandabove {
	    padding: .9rem 0 .9rem 1.233333rem;
	    background-color: #f1f4f2;
	    border-radius: .406667rem;
	    margin-top: .433333rem
	}
	
	.deduction .deductionitem  .threeandabove .display_flex {
	    padding-left: .72rem;
	    border-radius: .406667rem;
	    background-color: #fff;
	    height: 1.96rem;
	    width: 9.2rem;
	    align-items: center;
	    margin-right: 1.366667rem;
		display: inline-block;
	}
	
	.deduction .deductionitem  .threeandabove .display_flex_span,
	.deduction .deductionitem  .threeandabove .display_flex .span{
	    position: relative;
		top: -11px;
		color: #3b7de0;
		font-size: .78667rem;
		display: inline-block;
	}
	
	.deduction .deductionitem .threeandabove .display_flex input {
	    font-size: .893333rem;
	    line-height: 1.96rem;
	    height: 1.96rem;
	    text-indent: .266667rem;
	    color: #3b7de0;
	    width: 6.733333rem;
	}
	
	.deduction .deductionitem .medication {
	    padding: .4rem;
	    background-color: #f1f4f2;
	    border-radius: .106667rem;
	    margin-top: .133333rem;
	    align-items: center
	}
	
	.deduction .deductionitem .medication .display_flex {
	    padding-left: .32rem;
	    border-radius: .106667rem;
	    background-color: #fff;
	    height: .96rem;
	    width: 5.333333rem;
	    align-items: center;
	    margin-right: .32rem;
	    color: #3b7de0
	}
	
	.deduction .deductionitem .medication .display_flex input {
	    line-height: .8rem;
	    height: .8rem;
	    font-size: .493333rem;
	    text-indent: .266667rem;
	    width: 4.266667rem
	}
	
	.deduction .deductionitem .placeholder42 {
	    height: .56rem
	}
	
	.deduction .deductionitem .dollar {
	    font-size: .793333rem;
		color: #3b7de0;
		font-weight: 700
	}
	
	.deduction .deductionitem .number {
	    font-size: .493333rem;
	    font-weight: 700
	}
	
	.deduction .deductionitem .unit {
	    font-size: .373333rem
	}
	
	.deduction .submit {
		position: fixed;
		bottom: 1rem;
		left: 5vw;
	}
	.deduction .submit .submitbtn {
		height: 2.28rem;
		width: 90vw;
		line-height: 2.28rem;
	    background-color: #fff;
	    color: #3b7de0;
	    font-weight: 700;
	    border-radius: .94rem;
	    margin: auto;
	    text-align: center;
	    font-size: .856667rem
	}

</style>
